import React, { useState, useEffect } from 'react';
import { Modal, Button, Form, Input, Switch } from 'antd';

const UserModal = (props: any) => {

    const { isModalVisible, setIsModalVisible } = props.ModalVisible;
    const { formValues, onFinish } = props;
    const [form] = Form.useForm();

    useEffect(() => {
        if (formValues === undefined) {
            form.resetFields();
            return
        }
        form.setFieldsValue(formValues)



    }, [formValues]);

    const handleOk = () => {
        form.submit();
        // setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };


    return (
        <>

            <Modal forceRender={true} title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="邮箱"
                        name="email"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="create_time"
                        name="create_time"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name="status"
                        valuePropName="checked"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Switch />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}
export default UserModal;